<script setup lang="ts">
import { onMounted, nextTick } from 'vue';
import { useThemeStore } from '@/store/modules/theme';

const themeStore = useThemeStore();
const isInIframe = window.parent !== window;
const handler = (e: any) => {
  const { type, theme } = e.data;
  if (type === 'themeChange') {
    themeStore.setTheme(theme);
  }
};
onMounted(async () => {
  // 确保DOM已经准备好
  await nextTick();
  if (isInIframe) {
    window.parent.postMessage({ type: 'themeType' }, '*');
  } else {
    themeStore.initTheme();
  }
  window.addEventListener('message', handler);
});
onUnmounted(() => {
  window.removeEventListener('message', handler);
});
</script>

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style lang="scss">
@use '@/assets/style/common.scss';
</style>
